<!--堆叠条形图展示-->
<template>
        <div id="main" style="width:1000px;height:600px;margin: 10px auto;"></div>
</template>
<script>
    import request from "../utils/request";

    const echarts = require('echarts');

    export default{
        data () {
            return {
                search: '',
                currentPage: 1,
                pageSize: 20,
                total: 0,
                tableData: [],
                company: ["阿里巴巴","华为","牛客网","小米","猿辅导"],
                yData: ['评价','面经', '提问'],
                xData: [],
            };
        },
        created() {

        },
        methods: {
            initCharts () {
                var chartDom = document.getElementById('main');
                var myChart = echarts.init(chartDom);
                var option;

                    request.get("/companyInterview",{ // 请求/wordCloud接口
                            params: {
                                    pageNum: this.currentPage,
                                    pageSize: this.pageSize,
                                    search: this.search
                            }
                    }).then(res=>{
                            console.log(res);
                            this.company=[];
                            this.xData=[];

                            for (var i=0;i<res.data.records.length;i++)
                            {
                                    // this.data1[i]=res.data.records[i]['word']
                                    this.company.push(res.data.records[i]['company']);
                                    this.xData.push([res.data.records[i]['commentNum'],res.data.records[i]['interviewNum'],res.data.records[i]['questionNum']]);
                            }

                            // console.log(this.company,this.xData)


                            option = {
                                    title: {
                                            text: '大型互联网公司面经统计',
                                            subtext: '数据截止至: 2021.08.06'
                                    },
                                    tooltip: {
                                            trigger: 'axis',
                                            axisPointer: {            // Use axis to trigger tooltip
                                                    type: 'shadow'        // 'shadow' as default; can also be 'line' or 'shadow'
                                            }
                                    },
                                    toolbox: {  // 显示保存图片的按钮
                                            show: true,
                                            orient: 'horizontal',
                                            top: 10,
                                            right: 20,
                                            feature: {
                                                    saveAsImage: {}
                                            }
                                    },
                                    legend: {
                                            // data: ['Direct', 'Mail Ad', 'Affiliate Ad', 'Video Ad', 'Search Engine']
                                            data: this.company
                                    },
                                    grid: {
                                            left: '3%',
                                            right: '4%',
                                            bottom: '3%',
                                            containLabel: true
                                    },
                                    xAxis: {
                                            type: 'value'
                                    },
                                    yAxis: {
                                            type: 'category',
                                            // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                                            data: this.yData
                                    },
                                    series: [
                                            {
                                                    name: this.company[0],
                                                    type: 'bar',
                                                    stack: 'total',
                                                    label: {
                                                            show: true
                                                    },
                                                    emphasis: {
                                                            focus: 'series'
                                                    },
                                                    // data: [320, 302, 301, 334, 390, 330, 320]
                                                    data: this.xData[0]
                                            },
                                            {
                                                    name: this.company[1],
                                                    type: 'bar',
                                                    stack: 'total',
                                                    label: {
                                                            show: true
                                                    },
                                                    emphasis: {
                                                            focus: 'series'
                                                    },
                                                    data: this.xData[1]
                                            },
                                            {
                                                    name: this.company[2],
                                                    type: 'bar',
                                                    stack: 'total',
                                                    label: {
                                                            show: true
                                                    },
                                                    emphasis: {
                                                            focus: 'series'
                                                    },
                                                    data: this.xData[2]
                                            },
                                            {
                                                    name: this.company[3],
                                                    type: 'bar',
                                                    stack: 'total',
                                                    label: {
                                                            show: true
                                                    },
                                                    emphasis: {
                                                            focus: 'series'
                                                    },
                                                    data: this.xData[3]
                                            },
                                            {
                                                    name: this.company[4],
                                                    type: 'bar',
                                                    stack: 'total',
                                                    label: {
                                                            show: true
                                                    },
                                                    emphasis: {
                                                            focus: 'series'
                                                    },
                                                    data: this.xData[4]
                                            },
                                            {
                                                    name: this.company[5],
                                                    type: 'bar',
                                                    stack: 'total',
                                                    label: {
                                                            show: true
                                                    },
                                                    emphasis: {
                                                            focus: 'series'
                                                    },
                                                    data: this.xData[5]
                                            },
                                            {
                                                    name: this.company[6],
                                                    type: 'bar',
                                                    stack: 'total',
                                                    label: {
                                                            show: true
                                                    },
                                                    emphasis: {
                                                            focus: 'series'
                                                    },
                                                    data: this.xData[6]
                                            },
                                    ]
                            };

                            option && myChart.setOption(option);
                    })

            },
        },

        mounted () {
            this.initCharts();
            console.log("mounted")
        }
    }
</script>

<style scoped>

</style>